<template>
  <div class="personIndex">
    <!-- 最近收听歌曲 -->
    <div class="newlySongs">
      <div class="title">最近收听</div>
      <div class="newlySongList" v-if="this.newlysonglist.length">
        <el-table
          :data="newlysonglist"
          style="width: 100%"
          stripe
          @cell-dblclick="clickRow"
        >
          <el-table-column type="index" width="40"> </el-table-column>
          <el-table-column prop="name" label="歌名"> </el-table-column>
          <el-table-column prop="ar[0].name" label="歌手"> </el-table-column>
          <el-table-column prop="dt" label="时长"> </el-table-column>
        </el-table>
      </div>
      <div v-else class="alternate">
        你最近没有收听的歌曲~ <span @click="goToSing">去听歌</span>
      </div>
    </div>

    <!-- 我创建的歌单 -->
    <div class="mysongdetail">
      <div class="title">我创建的歌单 ({{ this.mySongDetail.length }})</div>
      <div class="mysongdetailList" v-if="this.mySongDetail.length">
        <list-card
          :listCardData="mySongDetail"
          @clickListCardItem="clickListCardItem"
        ></list-card>
      </div>
      <div v-else class="alternate">暂无歌单</div>
    </div>

    <!-- 我收藏的歌单 -->
    <div class="mylovesonglist">
      <div class="title">我收藏的歌单 ({{ this.myLoveSongDetail.length }})</div>
      <div class="mylovesongdetailList" v-if="this.myLoveSongDetail.length">
        <list-card
          :listCardData="myLoveSongDetail"
          @clickListCardItem="clickListCardItem"
        ></list-card>
      </div>
      <div v-else class="alternate">暂无歌单</div>
    </div>
  </div>
</template>

<script>
let userId = JSON.parse(localStorage.getItem("userInfo")).userId;
import ListCard from "../../../components/listCard/ListCard.vue";
import { handleMusicTime } from "../../../filters/index";
export default {
  components: { ListCard },
  name: "Index",
  data() {
    return {
      newlysonglist: [],
      newlyId: "newlyId",
      mySongDetail: [],
      myLoveSongDetail: [],
      load: true,
    };
  },

  mounted() {
    // this.$loading({
    //   target: this.$refs.newlyRef,
    //   lock: this.loading,
    //   spinner: "el-icon-loading",
    //   text: "加载中",
    //   customClass: "loading",
    //   fullscreen: this.load,
    // });
    // if (this.newlysonglist.length) {
    //   this.load = false;
    // }
    this.getNewlySongs();
    this.getUserSongList();
  },

  methods: {
    // 获取最近收听的歌曲
    async getNewlySongs() {
      const { data: res } = await this.$http("/record/recent/song", {
        params: { limit: 10 },
      });
      this.newlysonglist = res.data.list;
      this.newlysonglist = this.newlysonglist.map((item) => {
        return item.data;
      });
      this.newlysonglist.forEach((item, index) => {
        this.newlysonglist[index].dt = handleMusicTime(item.dt);
      });
    },
    // 双击某一行事件
    clickRow(row) {
      console.log(1);
      // 通知vuex播放歌曲的id变了
      this.$store.commit("updateMusicId", row.id);
      this.$store.commit("updateCurrentRowInfo", row);
      // 将vuex中的歌单数据更新
      this.$store.commit("updateMusicList", {
        musicListId: this.newlyId,
        musicList: this.newlysonglist,
      });
    },
    // 获取用户歌单
    async getUserSongList() {
      const { data: res } = await this.$http("/user/playlist", {
        params: { uid: userId },
      });
      // console.log(res);

      this.mySongDetail = res.playlist.filter((item) => {
        return item.creator.userId === userId;
      });
      this.myLoveSongDetail = res.playlist.filter((item) => {
        return item.creator.userId !== userId;
      });
    },
    // 点击创建的歌单事件
    clickListCardItem(id) {
      this.$router.push({ name: "musiclistdetail", params: { id } });
    },
    goToSing() {
      this.$router.push("/discover");
    },
  },
};
</script>

<style lang="less" scoped>
.personIndex {
  .title {
    width: 100%;
    height: 40px;
    color: #666666;
    border-bottom: 2px solid #e03a24;
    font-size: 20px;
  }
  .newlySongs {
    width: 100%;
    margin-bottom: 20px;
  }
  .alternate {
    display: flex;
    justify-content: center;
    height: 40vh;
    align-items: center;
    color: #666666;
    font-size: 20px;
    span {
      color: #0c73c2;
      cursor: pointer;
    }
  }
  .loading {
    color: #666666;
  }
}
</style>